<template>
  <div class="gx">
    <!-- <block-header icon="../../../static/icon/relative.png" title="关系" number=""></block-header> -->
    <details-group title="社会关系" :listLength="data.total">
      <a href="#/friendDetail" class="more-color" slot="more">
        <span class="relative-more">查看更多<span class="icon iconfont icon-dextrad" style="margin-left:.5rem"></span></span>
      </a>
    </details-group>
    
    <div class="margin-bottom-1">
      <mt-button v-for="(item,index) in data.flmc" :key="`gx_${index}`" size="small" type="primary" class="tag-z color">{{item.zlmc}}({{item.zl_total}})</mt-button>
      <ul class="box" v-for="(item,index) in data.flmc" v-if="index < 1" :key="`relative_${index}`">
        <cardBlock v-for="(item2,index2) in item.data"  v-if="index2 < 2"  :key="`relative_${index2}`" class="car-item test-card"  :imgUrl="item2.rowArr[0].col_val ? `${BASE64_TYPE}${item2.rowArr[0].col_val}` : '/static/default/head.png'">
            <div slot="name" class="card-tags">
              <strong class="name">{{item2.rowArr[2].col_val}}</strong>
              <span class="tag" style="backgroundColor:#4B7FE5">{{item.zlmc}}</span>
            </div>
            <div slot="tags" class="card-tags">
              <span class="tag" v-for="(item3,index3) in item2.rowArr[7].col_val" :key="`relative_${index3}`">{{item3}}</span>
            </div>
            <div class="info-grid" slot="data">
              <div class="grid-item align-left">
                <em>{{item2.rowArr[3].col_cn}}</em><span>{{item2.rowArr[3].col_val}}</span>
              </div>
              <div class="grid-item align-left">
                <em>{{item2.rowArr[5].col_cn}}</em><span style="color:#5077aa" v-init-tooltips="{
                  tableName: item2.tableName,
                  systemid: item2.systemid,
                  bsh: item2.rowArr[5].col_val,
                  bshlx: '001',
                  dalx: 'RY'
                }">{{item2.rowArr[5].col_val}}</span>
              </div>
              <div class="grid-item align-left">
                <em>{{item2.rowArr[4].col_cn}}</em><span>{{item2.rowArr[4].col_val}}</span>
              </div>
              <div class="grid-item align-left">  
                <em>{{item2.rowArr[6].col_cn}}</em><span>{{item2.rowArr[6].col_val}}</span>
              </div>
            </div>
        </cardBlock>
      </ul>
    </div>
  </div>
</template>

<script>
  import BlockHeader from '../../components/block-header'
  import detailsGroup from '../../components/details-group'
  import cardBlock from '../../components/card-block'

  export default {
    name: 'relative-list',
    components: {
      BlockHeader,
      detailsGroup,
      cardBlock
    },
    props: {
      icon: '',
      title: '',
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    mixins: [],
    computed: {},
    data() {
      return {
        limit: 2
      }
    },
    methods: {
    },
    filters: {
    },
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style lang="scss"  scoped>
 @import "../../style/public";
.p-title {
  height: 2.5rem;
  line-height: 2.5rem;
  margin-left: 2rem;
  border-bottom: .5px solid #eee;
  margin-right: 1rem;
  font-size: 1rem;
  color: #0a0a0a;
 }
 .p-title:before {
  font-size: 1.3rem;
  font-weight: 600;
  color: #46A3E8;
  content: '|';
  margin-right: .5rem;
 }
 .no-border {
  border-bottom: 0px;
}
.relative-more {
  float: right;
  font-size: 1rem
}
.margin-bottom-1 {
  margin-bottom: .5rem;
  margin-top: .5rem;
  padding-left: 1rem;
} 
.tag-z {
  margin-left: .8rem;
  font-size: .8rem;
  padding: 0 8px;
  height: 24px;
  vertical-align: middle;
  border-radius: 15px;
}
.gx {
  margin-top: 1rem;
  background-color: #FFFFFF;
 }
 .color {
  background-color: #FF6600;
}
.more-color {
  color:#343434;
}
</style>
